<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-10 17:04:16
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-23 15:20:07
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="contaienr_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="scrollPane">
      <!-- 每部分  -->
      <view class="part" v-for="(part, i) in list" :key="i">
        <!-- 标题 -->
        <view class="title">{{ part.title }}</view>

        <!-- 单个模块 -->
        <view class="main">
          <view class="card" v-for="(module, j) in part.cards" @click="toPage(module.url)" :key="j">
            <!-- 图标 -->
            <image :src="require(`../../static/workTable/${module.icon}.png`)" />
            <!-- 模块名称 -->
            <view class="labels">{{ module.label }}</view>
            <div class="triangle" :class="auditState == '3' || auditState == '1'
              ? 'triangle_no'
              : auditState == '2'
                ? 'triangle_through'
                : 'triangle_yes'
              " v-if="module.label == '机构信息变更'"></div>
            <span v-if="module.label == '机构信息变更'" class="triangle_span">{{
              auditState == "3"
                ? "未提交"
                : auditState == "2"
                  ? "已通过"
                  : auditState == "1"
                    ? "不通过"
                    : "待审核"
            }}</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { baseImgUrl } from "config.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      baseImgUrl: baseImgUrl,
      // 导航栏参数
      navOptions: {
        center: {
          title: "工作台",
        },
      },
      loading: false, // 子模块点击防抖
      list: [], // 工作台显示功能
      childModules: [
        /*
        ! 以设计稿为准
          title:每个部分的标题
          permission:哪个角色下才会显示
          card：
            label：模块名
            icon：图标名
            url：页面链接
        */

        //!  消防救援机构 角色下的工作台菜单
        {
          title: "执业管理",
          permission: "rescueOrganization", // 服务机构
          cards: [
            {
              label: "服务机构",
              icon: 'icon_fault',
              url: "agency/index",
            },
            {
              label: "项目查询",
              icon: "icon_projectQuery",
              url: "projectManage/list?flag=true",
            },
            {
              label: "社会单位",
              icon: "icon_fault",
              url: "socialUnit/list",
            },
            {
              label: "报告查询",
              icon: "icon_reportView",
              url: "reportView/index",
            },
          ],
        },

        //! 消防技术服务机构（公司账号）
        {
          title: "执业管理",
          permission: "mechanism", // 服务机构
          cards: [
            {
              label: "机构信息变更",
              icon: "icon_agencyInfoChange",
              url: "organizeInforChange/index",
            },
            {
              label: "人员管理",
              icon: "icon_peopleManage",
              url: "peopleManage/list",
            },
            {
              label: "项目管理",
              icon: "icon_projectManage",
              url: "projectManage/list",
            },
            {
              label: "报告查询",
              icon: "icon_reportView",
              url: "reportView/index",
            },
          ],
        },

        //! 消防技术服务机构（项目负责人）
        {
          title: "任务管理",
          permission: "engineer", // 服务机构
          cards: [
            {
              label: "单位任务",
              icon: "icon_unitTask",
              url: "manage/UnitTask",
            },
          ],
        },
        {
          title: "执业管理",
          permission: "engineer", // 服务机构
          cards: [
            {
              label: "项目查询",
              icon: "icon_projectQuery",
              url: "projectManage/list?flag=true",
            },
            {
              label: "任务分配",
              icon: "icon_taskAssignment",
              url: "taskAssignment/index",
            },
            {
              label: "报告查询",
              icon: "icon_reportView",
              url: "reportView/index",
            },
          ],
        },

        //! 消防技术服务机构（技术负责人）
        {
          title: "任务管理",
          permission: "technicalDirector", // 服务机构
          cards: [
            {
              label: "单位任务",
              icon: "icon_unitTask",
              url: "manage/UnitTask",
            },
          ],
        },
        {
          title: "执业管理",
          permission: "technicalDirector", // 服务机构
          cards: [
            {
              label: "项目查询",
              icon: "icon_projectQuery",
              url: "projectManage/list?flag=true",
            },
            {
              label: "报告查询",
              icon: "icon_reportView",
              url: "reportView/index",
            },
            {
              label: "报告审核",
              icon: "icon_reportView",
              url: "reportView/unauditedIndex",
            },
          ],
        },

        //! 消防技术服务机构（执业人员）
        {
          title: "任务管理",
          permission: "staffPeople", // 服务机构
          cards: [
            {
              label: "单位任务",
              icon: "icon_unitTask",
              url: "manage/UnitTask",
            },
          ],
        },
        {
          title: "执业管理",
          permission: "staffPeople", // 服务机构
          cards: [
            {
              label: "项目查询",
              icon: "icon_projectQuery",
              url: "projectManage/list?flag=true",
            },
            {
              label: "报告查询",
              icon: "icon_reportView",
              url: "reportView/index",
            },
          ],
        },

        //! 社会单位
        {
          title: "执业管理",
          permission: "socialunits", // 服务机构
          cards: [
            {
              label: "报告签收",
              icon: "icon_reportReceipt",
              url: "reportSign/list",
            },
            {
              label: "报告查询",
              icon: "icon_reportView",
              url: "reportView/index",
            },
            {
              label: "故障整改",
              icon: "icon_fault",
              url: "fault/index",
            },
          ],
        },
        {
          title: "评价管理",
          permission: "socialunits", // 服务机构
          cards: [
            {
              label: "执业评价",
              icon: "icon_unitTask",
              url: "evaluate/staff",
            },
            {
              label: "机构评价",
              icon: "icon_unitTask",
              url: "evaluate/institution",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.soloveMenu();
    // console.log(this.auditState)
  },
  computed: {
    ...mapState({ auditState: (state) => state.home.auditState }), // 获取用户信息
  },
  methods: {
    soloveMenu() {
      let menuWidthRole = []; // 角色下所有菜单
      let deduplicationMenu = []; // 去重后的菜单

      // 获取用户角色
      const roles = this.$store.state.login.userInfo.roles || ["mechanism"];
      if (roles.indexOf("engineer") != "-1") {
        this.judgeAudit();
      }

      // 管理员拥有所有角色
      if (roles[0] === "admin") {
        menuWidthRole = this.childModules;
      } else {
        // 遍历角色，将相匹配的子模块菜单插入
        for (let i = 0; i < roles.length; i++) {
          for (let j = 0; j < this.childModules.length; j++) {
            if (roles[i] == this.childModules[j].permission) {
              menuWidthRole.push(this.childModules[j]);
            }
          }
        }
      }

      // 取出分组名去重，然后将菜单 根据分组名合并
      Array.from(new Set(menuWidthRole.map((menu) => menu.title))).forEach(
        (groupTitle) => {
          let cards = [];

          // 取出 所有相同分组的子模块
          menuWidthRole
            .filter((group) => {
              if (group.title === groupTitle) {
                return true;
              }
            })
            .forEach((group) => {
              cards.push(...group.cards);
            });

          cards = this.removeDuplicate(cards);

          // 插入去重后的菜单
          deduplicationMenu.push({
            title: groupTitle,
            cards: cards,
          });
        }
      );

      this.list = deduplicationMenu;
      console.log(this.list);
    },

    // 去重
    removeDuplicate(arr) {
      let len = arr.length;

      for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
          if (arr[i].label === arr[j].label) {
            arr.splice(j, 1);
            len--; // 减少循环次数提高性能
            j--; // 保证j的值自加后不变
          }
        }
      }
      return arr;
    },
    // 通过该函数判断是否有未审核的人员进入单位任务模块
    judgeAudit() { },
    // 跳转页面
    toPage(url) {
      if (this.loading) return;
      this.loading = true;
      uni.showLoading({
        title: "正在加载请稍后",
        mask: true,
      });

      let that = this;
      // 判断当前角色所属的机构，是否满足执业要求，不满足特定几个页面不能进入使用
      if (url == "taskAssignment/index" || url == "manage/UnitTask") {
        that.$store
          .dispatch("checkOperationStatusApi")
          .then((res) => {
            if (res.code == 200) {
              that.$store.dispatch("getMeetRequireMentApi").then((res1) => {
                if (res1.code == 200) {
                  uni.navigateTo({
                    url: "../../pages_workTableChild/" + url,
                  });
                } else {
                  uni.showToast({
                    icon: "none",
                    title: res1.msg,
                  });
                }
              });
            } else {
              uni.showToast({
                icon: "none",
                title: res.msg,
              });
            }
          })
          .finally(() => {
            let timer = setTimeout(() => {
              this.loading = false;
              uni.hideLoading();
              clearTimeout(timer);
            }, 3000);
          });
      } else {
        uni.navigateTo({
          url: "../../pages_workTableChild/" + url,
        });
        let timer = setTimeout(() => {
          this.loading = false;
          uni.hideLoading();
          clearTimeout(timer);
        }, 3000);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.contaienr_page {
  color: #333;
  overflow-y: auto;
  height: 100%;

  .scrollPane {
    padding: 20rpx;
    min-height: calc(100vh - 180rpx);
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

    .part {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 34rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;

      .title {
        font-weight: bold;
        font-size: 30rpx;
        line-height: 30rpx;
        position: relative;
        display: inline-block;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 10rpx;
          background-color: rgba(0, 110, 254, 0.17);
        }
      }

      .main {
        display: flex;
        flex-flow: row wrap;

        .card {
          // border-radius: 20rpx;
          background: white;
          text-align: center;
          padding: 24rpx;
          flex: 0 0 calc((100% - 48rpx) / 3);
          position: relative;

          &:nth-child(3n-1) {
            margin: 0 24rpx 24rpx;
          }

          image {
            // margin: 0 auto;
            // width: 40%;
            width: 130rpx;
            height: 94rpx !important;
            margin-bottom: 12rpx;
          }

          .labels {
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 36rpx;
          }

          .triangle_yes {
            border-top: 100rpx solid #335ac6 !important;
          }

          .triangle_through {
            border-top: 100rpx solid green !important;
          }

          .triangle_no {
            border-top: 100rpx solid rgb(255, 0, 0) !important;
          }

          .triangle {
            width: 0;
            height: 0;
            border-top: 100rpx solid transparent;
            border-left: 100rpx solid transparent;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 99;
          }

          .triangle_span {
            font-size: 20rpx;
            width: 0;
            height: 0;
            color: rgb(255, 255, 255);
            position: absolute;
            top: 10rpx;
            right: 74rpx;
            z-index: 999;
            transform: rotate(-45deg) translateY(0px) translateX(0px);
          }
        }
      }
    }
  }
}
</style>
